import { useState, useEffect } from "react";

import "./index.scss";

export default function BlurryLoading() {
  const [loadCount, setLoadCount] = useState<number>(100);

  useEffect(() => {
    if (loadCount > 0) {
      const token = setTimeout(() => {
        setLoadCount(x => --x);
      }, 50);
      return () => clearTimeout(token);
    }
  });

  return (
    <section className='blurry-loading'>
      <div
        className='blurry-loading-bg'
        style={{ filter: `blur(${loadCount / 2}px)` }}
      ></div>
      <span style={{ opacity: `${loadCount}%` }}>{100 - loadCount}%</span>
    </section>
  );
}
